import {
  jump1,
  jump2,
  imgYu1
} from "../model/model.js"


var data = [{
  step: "01",
  title: "思维导图",
  label: "学习方法及工具",
  src: "../../static/images/design1.png",

  hint_flag1: 0,
  hint1: "",
  hint_src1: "",

  content: `目标：思维导图作为一个思考工具，是用来辅助思考的。其有三个主要作用：
（1）整理所学知识，帮助个人知识体系化；
（2）帮助我们捕捉灵感，拓展知识体系；
（3）除了用于个人思考外，也可以帮助整理团队的集体思维。

工具：mindmanger、xmind、processon等思维导图工具。

过程：
（1）头脑风暴；
（2）构建联系；
（3）进行取舍。

注意：忌浅尝辄止，忌学而不用。思维导图保存好，在后面的学习中需要不断丰富与完善。
`,

  question_flag: 0,
  question: "",
  result: 0,
  answer: 0,
  select: "",
  options: ["", "", "", ""],
  right_option: "",

  hint_flag2: 0,
  hint2: "",
  hint_src2: "",

  last: "",
  next: ""

}, {
  step: "02",
  title: "体验",
  label: "",
  src: "",

  hint_flag1: 0,
  hint1: "",
  hint_src1: "",

  content: `目标：通过体验小程序产品，熟悉微信小程序的产品定位，帮助产生初步创意。

过程：
（1）了解产品定位：微信小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验。小程序其实是Web前端的变体。微信小程序的特点：无需安装；触手可及；用完即走；无需卸载。
（2）从以下三个角度来进行体验：
•	用户：该小程序服务了哪类人群？
•	场景：该小程序的应用场景是怎样的？
例如：用户(who)夜间(when)在陌生的路上(where)开车(do)对路线不熟悉且路况不好(how)；再如，买家(who)在线下批发市场(where)批货(do)。
•	技术：该小程序的核心功能可能是由何种技术能力实现的？
`,

  question_flag: 0,
  question: "",
  result: 0,
  answer: 0,
  select: "",
  options: ["", "", "", ""],
  right_option: "",

  hint_flag2: 0,
  hint2: "",
  hint_src2: "",

  last: "",
  next: ""
}, {
  step: "03",
  title: "产生创意——疯狂八分钟",
  label: "",
  src: "../../static/images/design3.png",

  hint_flag1: 0,
  hint1: "",
  hint_src1: "",

  content: `目标：产生初步创意。

简介：
“疯狂八分钟”是逼着自己在8分钟的时间内围绕一个问题/一个好的想法来扩展出8个小型变体，以草图来呈现，1分钟1个。（“疯狂”指的是活动节奏）
过程：
（1）设定思考题目；
（2）将一张白纸对折出八个方块；
（3）计时开始！

注意：
不要小看草图：每张草图都包含方框、文字，可能还会有简笔人物画。画图是把抽象概念变成具体方案最快捷简单的办法。

`,

  question_flag: 0,
  question: "",
  result: 0,
  answer: 0,
  select: "",
  options: ["", "", "", ""],
  right_option: "",

  hint_flag2: 0,
  hint2: "",
  hint_src2: "",

  last: "",
  next: ""

}, {
  step: "04",
  title: "创意决策——四象限法",
  label: "",
  src: "../../static/images/design4.png",

  hint_flag1: 0,
  hint1: "",
  hint_src1: "",

  content: `目标：对已经有的各种方案进行评估和梳理，找到自己适合的发力角度。

过程：
（1）画出象限。上图坐标仅为示例，可以根据需要列出其他衡量维度：可行性——价值；紧急程度——重要性……
（2）将小组所有成员“疯狂八分钟”获得的各个想法贴入不同象限；
（3）决出胜利的想法。
`,

  question_flag: 0,
  question: "",
  result: 0,
  answer: 0,
  select: "",
  options: ["", "", "", ""],
  right_option: "",

  hint_flag2: 0,
  hint2: "",
  hint_src2: "",

  last: "",
  next: ""

}, {
  step: "05",
  title: "竞品分析",
  label: "",
  src: "",

  hint_flag1: 0,
  hint1: "",
  hint_src1: "",

  content: `目标：发展已有创意。
（1）充分了解行业发展的竞争情况；
（2）寻找新的发展机会或者市场切入点；
（3）了解竞争对手的优势和劣势，发现机会点。

简介：对竞争产品的分析通常包括产品层面的分析和设计层面的分析。通过了解现有产品的相关信息并给出分析结论，从而借鉴到自己的产品设计中。

渠道：数据渠道：艾瑞、百度统计、淘宝指数、易观智库等；工具：SWOT。

过程：
（1）确定竞品：核心竞品、重要竞品、一般竞品
（2）确定分析维度：战略定位、盈利模式、用户群体、产品功能、交互方式、视觉表现、动画效果、手势等；
（3）制作竞品分析报告。
`,

  question_flag: 0,
  question: "",
  result: 0,
  answer: 0,
  select: "",
  options: ["", "", "", ""],
  right_option: "",

  hint_flag2: 0,
  hint2: "",
  hint_src2: "",

  last: "",
  next: ""

}, {
  step: "06",
  title: "主动出错",
  label: "学习方法及工具",
  src: "../../static/images/design6.png",

  hint_flag1: 1,
  hint1: "微信小程序",
  hint_src1: "../index/index?tab=2&scroll=_1_",

  content: `目标：学习通过查看报错信息自行deBug。

对于初学者而言，如果输入程序以后看到一大堆报错信息，往往会感到束手无策。采用代码片导入微信小程序开发工具，可以确保程序是没有问题。但这样的作法虽然简化了输入的过程，但却好像什么也没有作，没有学到什么。
“主动试错”的方法可以帮助初学者解决这一问题。与其在日后输入代码出错后不知如何下手，不如提早“主动试错”，研究一下微信开发者工具中控制台（即console）上的报错信息。也可以试着修改代码，看看程序是否能够按照自己的意愿来执行。
`,

  question_flag: 0,
  question: "",
  result: 0,
  answer: 0,
  select: "",
  options: ["", "", "", ""],
  right_option: "",

  hint_flag2: 0,
  hint2: "",
  hint_src2: "",

  last: "",
  next: ""

}, {
  step: "07",
  title: "UCD方法综述/设计流程",
  label: "",
  src: "",

  hint_flag1: 0,
  hint1: "",
  hint_src1: "",

  content: `UCD（User Centered Design）是指以用户为中心的设计。是一种设计过程中以用户体验为设计决策的中心，强调用户优先的设计思维。从本质上讲，设计思维过程是迭代的，灵活的，专注于设计师和用户之间的协作，重点在于根据真实用户的感受和行为来将想法变为现实。

设计思维通过以下步骤解决复杂的问题：
•	用户调研：理解所涉及的人的需求；
•	定义问题：以人为中心的方式重新组织和定义问题；
•	方案设计：创造想法，制定问题的解决方案；
•	原型设计：制定原型展现解决方案；
•	测试：不断测试原型。

在每个步骤中，我们将学习相应的创新方法。
`,

  question_flag: 0,
  question: "",
  result: 0,
  answer: 0,
  select: "",
  options: ["", "", "", ""],
  right_option: "",

  hint_flag2: 0,
  hint2: "",
  hint_src2: "",

  last: "",
  next: ""

}, {
  step: "08",
  title: "用户画像（Empathy Map）",
  label: "",
  src: "../../static/images/design8.png",

  hint_flag1: 0,
  hint1: "",
  hint_src1: "",

  content: `目标：明确目标用户，通过调研收集大量信息，了解目标用户常见行为和使用场景，明确用户的痛点和需求点。

简介：
Empathy（同理心），亦译为“设身处地理解”、“共情”。用拟人化的方法，帮助团队成员将注意力集中在目标用户身上，迅速获取用户的概况。

过程：
（1）绘制画布，在“头部”周围的大块面积标注出“所见”、“所说、所做”、“所听”、“所想、所感”条目；
（2）针对条目进行描述；
（3）总结。一句话概括目标用户“是谁（who）”，他的目标/希望实现的价值是什么（goal）”；
（4）根据这张图，总结出目标用户的痛点（pain）及对应的需求点（gain）。
`,

  question_flag: 0,
  question: "",
  result: 0,
  answer: 0,
  select: "",
  options: ["", "", "", ""],
  right_option: "",

  hint_flag2: 0,
  hint2: "",
  hint_src2: "",

  last: "",
  next: ""

}, {
  step: "09",
  title: "用户旅程图",
  label: "",
  src: "../../static/images/design9.png",

  hint_flag1: 0,
  hint1: "",
  hint_src1: "",

  content: `目标：
通过模拟用户使用你的服务或产品的轨迹，为方案草图和原型提供框架；帮助记录所有的事情是如何组织到一起的。

简介：
由词语、箭头和几个方框组成的一张图表，找到在设计过程中可能遗漏的细节。

过程（30-60min）：
（1）由一人执笔，在大白纸上画出一个公共视图。过程之中，大家一起讨论；
（2）写出起点：过程中可能涉及到的重要人物；
（3）写出终点：要帮助用户完成的某个操作或解决的某个问题；
（4）补充中间过程：思考你们如何能帮助他们实现目标，过程之中需要走几步；
（5）思考整个项目中是否还有其他的可能路径，都用类似的草图画出来。
`,

  question_flag: 0,
  question: "",
  result: 0,
  answer: 0,
  select: "",
  options: ["", "", "", ""],
  right_option: "",

  hint_flag2: 0,
  hint2: "",
  hint_src2: "",

  last: "",
  next: ""

}, {
  step: "010",
  title: "HMW",
  label: "",
  src: "../../static/images/design10.png",

  hint_flag1: 0,
  hint1: "",
  hint_src1: "",

  content: `目标：发现创新机会点——将pain转化为机会。从而明确要解决的问题，定义问题也是在定义产品的核心价值，即产品的核心竞争力。

简介：
HMW即How Might We的首字母缩写，中文为“我们应该如何”。

过程：
（1）结合共感图，根据who、gain、pain三个要素寻找创新机会点；
（2）团队的每个人独立写出机会点，用HMW开头的句式，每个HMW写在一张便利贴上；
（3）把便利贴集中贴到一起，迅速筛选；
（4）将选好的HMW笔记贴到用户旅程图上的相应位置；
（5）将最终胜出的HMW点逐步细节化、具体化。例如上面图例中的最后一条“我们应该如何提升深夜回家的女孩在车站的候车体验”，是不是感觉比前两点更好下手解决呢？
`,

  question_flag: 0,
  question: "",
  result: 0,
  answer: 0,
  select: "",
  options: ["", "", "", ""],
  right_option: "",

  hint_flag2: 0,
  hint2: "",
  hint_src2: "",

  last: "",
  next: ""

}, {
  step: "011",
  title: "团队吉祥物",
  label: "",
  src: "../../static/images/design11.png",

  hint_flag1: 0,
  hint1: "",
  hint_src1: "",

  content: `目标：我们用一种类似小游戏的方式来帮助团队建立共同愿景，明确核心价值观。
简介：吉祥物是“团队基因”的展现。也可以理解成，一定程度上一个团队的构成决定了团队未来的走向，关系到产品的核心价值。
过程：
（1）每个人选择1-2个动物作为思维发散的起点，思考这些动物的生存之道；
（2）小组成员交换思维导图，在别人的基础上丰富感兴趣的部分，再分享；
（3）投票选择一种大家最喜欢的动物，或喜欢得比较多的某些动物属性；
（4）小组选择了某种动物，然后发挥想象把这个动物定义为你们的吉祥物。
`,

  question_flag: 0,
  question: "",
  result: 0,
  answer: 0,
  select: "",
  options: ["", "", "", ""],
  right_option: "",

  hint_flag2: 0,
  hint2: "",
  hint_src2: "",

  last: "",
  next: ""

}, {
  step: "012",
  title: "方案设计",
  label: "",
  src: "../../static/images/design12.png",

  hint_flag1: 1,
  hint1: "云函数及云数据库",
  hint_src1: "../index/index?tab=2&scroll=_2_",

  content: `目标：进行功能设计，并给出问题的解决方案。

过程：
（1）进行“组件认知与系统功能拆解”的练习；
（2）根据对应的需求点，进行功能设计。
包含基础功能：能够解决用户痛点，满足最基本需求的功能；
以及附加功能（在1.0版本的设计方案中可以暂不考虑）：尝试给用户贴心、情感化的设计；并基于小程序的特点，设计易于传播的功能。
（3）研究哪些组件，哪些API，哪些页面效果可以帮助你更好的实现这个功能。
`,

  question_flag: 0,
  question: "",
  result: 0,
  answer: 0,
  select: "",
  options: ["", "", "", ""],
  right_option: "",

  hint_flag2: 0,
  hint2: "",
  hint_src2: "",

  last: "",
  next: ""

}, {
  step: "013",
  title: "原型设计",
  label: "",
  src: "../../static/images/design13.png",

  hint_flag1: 0,
  hint1: "",
  hint_src1: "",

  content: `目标：通过制作原型梳理各个页面间的跳转逻辑。通过原型走查页面，可以帮助我们发现遗漏的细节。

简介：
原型是一种让用户提前体验产品、交流设计构想、展示复杂系统的方式，是最终系统的代表模型或者模拟，比线框图更加真实、细致。

工具：PowerPoint或Keynote、Axure、墨刀等原型制作工具。

过程：
（1）选对工具。若产品显示在屏幕上（网页、应用程序、软件等）——用Keynote或PowerPoint；
（2）逐个击破。为了提高制作原型的效率，每个团队成员都要参与进来，根据自己团队的需求进行分工；
（3）缝合完整。将所有人制作的部分进行整合，让原型从头至尾紧密统一；
（4）先行试验。团队内部自行模拟体验一遍原型。
`,

  question_flag: 0,
  question: "",
  result: 0,
  answer: 0,
  select: "",
  options: ["", "", "", ""],
  right_option: "",

  hint_flag2: 0,
  hint2: "",
  hint_src2: "",

  last: "",
  next: ""

}, {
  step: "014",
  title: "测试",
  label: "",
  src: "",

  hint_flag1: 0,
  hint1: "",
  hint_src1: "",

  content: `目标：原型测试是制作原型过程中的关键步骤，也是原型制作的最终目的。可用性测试是对前面所做的所有工作进行一次验证。

过程：
（1）测试者招募与筛选，根据目标人群特征邀请3-5名测试者即可；
（2）准备测试场景及问题。
测试时长可以是一个小时左右，足以测试5-6个左右的关键场景，并列出一些观察结果和关键问题，例如：
•	用户如何开始任务的？（是搜索还是浏览？）
•	他先做了什么，再做了什么？
•	他如何做出最终决定的？
•	他们是否领会了设计意图？有什么操作困难？
（3）观察及记录。
测试开始前，你需要给用户简要介绍你们的产品，但一定要避免引导性的操作说明；接着，向用户提出测试场景，请用户独立操作。你需要做的就是尽可能详细地记录用户的表情、语言、动作等各种反馈；
（4）当用户完成操作后，根据需要对用户进行访谈；
（5）整理并分析测试结果，用于改善设计。
`,

  question_flag: 0,
  question: "",
  result: 0,
  answer: 0,
  select: "",
  options: ["", "", "", ""],
  right_option: "",

  hint_flag2: 0,
  hint2: "",
  hint_src2: "",

  last: "",
  next: ""

}]
Page({
  data: {},
  jump1,
  jump2,
  imgYu1,
  toLast: function() {
    var that = this
    switch (that.data.step) {
      case "01":
        break;
      case "02":
        that.setData({
          ...data[0]
        })
        break;
      case "03":
        that.setData({
          ...data[1]
        })
        break;
      case "04":
        that.setData({
          ...data[2]
        })
        break;
      case "05":
        that.setData({
          ...data[3]
        })
        break;
      case "06":
        that.setData({
          ...data[4]
        })
        break;
      case "07":
        that.setData({
          ...data[5]
        })
        break;
      case "08":
        that.setData({
          ...data[6]
        })
        break;
      case "09":
        that.setData({
          ...data[7]
        })
        break;
      case "010":
        that.setData({
          ...data[8]
        })
        break;
      case "011":
        that.setData({
          ...data[9]
        })
        break;
      case "012":
        that.setData({
          ...data[10]
        })
        break;
      case "013":
        that.setData({
          ...data[11]
        })
        break;
      case "014":
        that.setData({
          ...data[12]
        })
        break;
      default:
        break
    }
  },
  toNext: function() {
    var that = this
    switch (that.data.step) {
      case "01":
        that.setData({
          ...data[1]
        })
        break;
      case "02":
        that.setData({
          ...data[2]
        })
        break;
      case "03":
        that.setData({
          ...data[3]
        })
        break;
      case "04":
        that.setData({
          ...data[4]
        })
        break;
      case "05":
        that.setData({
          ...data[5]
        })
        break;
      case "06":
        that.setData({
          ...data[6]
        })
        break;
      case "07":
        that.setData({
          ...data[7]
        })
        break;
      case "08":
        that.setData({
          ...data[8]
        })
        break;
      case "09":
        that.setData({
          ...data[9]
        })
        break;
      case "010":
        that.setData({
          ...data[10]
        })
        break;
      case "011":
        that.setData({
          ...data[11]
        })
        break;
      case "012":
        that.setData({
          ...data[12]
        })
        break;
      case "013":
        that.setData({
          ...data[13]
        })
        break;
      default:
        break
    }
  },


  onLoad(options) {
    var that = this
    if (options.step) {

      switch (options.step) {
        case "01":
          that.setData({
            ...data[0]
          })
          break;
        case "02":
          that.setData({
            ...data[1]
          })
          break;
        case "03":
          that.setData({
            ...data[2]
          })
          break;
        case "04":
          that.setData({
            ...data[3]
          })
          break;
        case "05":
          that.setData({
            ...data[4]
          })
          break;
        case "06":
          that.setData({
            ...data[5]
          })
          break;
        case "07":
          that.setData({
            ...data[6]
          })
          break;
        case "08":
          that.setData({
            ...data[7]
          })
          break;
        case "09":
          that.setData({
            ...data[8]
          })
          break;
        case "010":
          that.setData({
            ...data[9]
          })
          break;
        case "011":
          that.setData({
            ...data[10]
          })
          break;
        case "012":
          that.setData({
            ...data[11]
          })
          break;
        case "013":
          that.setData({
            ...data[12]
          })
          break;
        case "014":
          that.setData({
            ...data[13]
          })
          break;
        default:
          break
      }
    }
  }
})